<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>比赛实况</title>
<link rel="stylesheet" href="src/css/layui.css"  media="all">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="shortcut icon" href="img/ic.png">
<!-- Custom CSS -->
<link href="css/sb-admin.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<style>
  .layui-tab{
    margin: 0;
  }
</style>
<script src="js/jquery.js"></script>
<script>
    $(function() {
        $("iframe").css("height",$(".layui-body").height()-45);
    })
</script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <nav class="navbar  navbar-fixed-top" role="navigation" style="height: 67px; background-image:url(img/top.jpg);">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header" >
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav" >

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span id="userName"></span> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">比赛信息</a>
          <dl class="layui-nav-child">
            <dd class="site-demo-active" data-type="" data-id="11">比赛实况</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="Check.html" data-id="99">比赛回查</dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">功能管理</a>
          <dl class="layui-nav-child">
            <dd class="site-demo-active" data-type="tabAdd" data-url="achievement.html" data-id="22">成绩管理</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="ParticipatingTeams.html" data-id="33">车队管理</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="Court.html" data-id="44">赛场管理</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="Fault.html" data-id="55">设备管理</dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">基础数据</a>
          <dl class="layui-nav-child">
            <dd class="site-demo-active" data-type="tabAdd" data-url="device.html" data-id="66">设备管理</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="Referee.html" data-id="77">裁判管理</dd>
            <dd class="site-demo-active" data-type="tabAdd" data-url="User.html" data-id="88">用户管理</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title">
          <li class="layui-this back_index" lay-id="11">后台首页</li>
        </ul> 
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
              <iframe src="index1.html" frameborder="no" style="width:100%;height:800px;"></iframe>
          </div>
        </div>
      </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script type="text/javascript" src="js/common.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="src/layui.js"></script>

<script>
//JavaScript代码区域
$(function() {
    var userName = localStorage.getItem("userName");
    $("#userName").text(userName); 
    //$("iframe").css("height",$(".layui-body").height()-45);
    /*$(".layui-tab-item").on('load','iframe',function() {
      $('iframe').css("height",$(".layui-body").height()-45);
    })*/
})

layui.use('element', function(){
   var $ = layui.jquery
  ,element = layui.element;
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = othis.data('type'), urls=othis.data('url'),titles=othis.html(),TabId=othis.data('id');
    var num=0;
    for (var i = 0; i < $(".layui-tab-title li").length; i++) {
        if (TabId==$(".layui-tab-title li").eq(i).attr('lay-id')) {
          element.tabChange('demo', TabId);
          return false;
        }
        num++;
    }
    console.log(num);
    console.log($(".layui-tab-title li").length);
    if (num==$(".layui-tab-title li").length) {
        element.tabAdd('demo', {
            title: titles
            ,content: '<iframe src="'+urls+'" frameborder="no" style="width:100%;height:800px;"></iframe>'
            ,id: TabId
          })
      };
      element.tabChange('demo', TabId);
  });
});
</script>
</body>
</html>
